import {PageContainer} from '@ant-design/pro-layout';
import React, { useRef, useState} from 'react';
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Button, Modal, message, Switch, Popconfirm  } from 'antd';
import {getLinkData, addLink, editLink, getLinkDetail, delLinkDetail,editDisplay} from "@/services/link";
import AddOrEdit from "@/pages/Link/compoments/AddOrEdit";
import ProTable from "@ant-design/pro-table";

const Index = () => {
  //定义表格自动刷新
  const ref = useRef()
  //定义连接添加的模态框状态
  const [ isModalVisible,setIsModalVisible ] = useState(false)

  const [ id,setId ] = useState(undefined)

  //定义表格字段
  const columns = [
    {
      title:'ID',
      dataIndex:'id',
      hideInSearch:true
    },
    {
      title:'连接名称',
      dataIndex:'name',
    },
    {
      title:'链接地址',
      dataIndex:'img_url',
    },
    {
      title:'链接状态',
      dataIndex:'display',
      render:(_,record) => {
        return <Switch checkedChildren="开启" unCheckedChildren="关闭" onClick={() => onEditLink(record.id)} defaultChecked={record.display == 0 ? false:true} />
      }
    },
    {
      title:'链接描述',
      dataIndex:'describe',
      hideInSearch:true
    },
    {
      title:'操作',
      render: (_,record) => {
        return <div>
          <Popconfirm title="你确定要删除吗？" onConfirm={()=>{delLink(record.id)}} okText='确认'>
            <Button type="primary" shape="circle"  icon={<DeleteOutlined />} />
          </Popconfirm>&nbsp;&nbsp;
          <Button type="primary" shape="circle" onClick={()=>showModal(true,record.id)} icon={<EditOutlined />} />&nbsp;&nbsp;
        </div>
      }
    },
  ]
  //查询连接列表
  const getLink = async (params) => {
    const data = {
      name:params.name,
      display:params.display
    }
    const LinkList = await getLinkData(data,params.current)
    return {
      data: LinkList.data,
      success: true,
      total: LinkList.meta.pagination.total
    }
  }

  const showModal = (show,editId = undefined) => {
    setIsModalVisible(show)
    setId(editId)
  }


  //更新连接的显示状态
  const onEditLink = async (id) => {
      const res = editDisplay(id)
      if (res != null ){
        ref.current.reload();
      }else{
        message.success("修改成功")
      }
  }
  //删除连接的方法
  const delLink = async (id) => {
    const res = await delLinkDetail(id)
    if (res.status == null){
      message.success("删除成功")
      setIsModalVisible(false)
      ref.current.reload();
    }else{
      message.error('删除失败')

    }
  }

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        request={async (params= {}) => getLink(params) }
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={{
          defaultCollapsed:false,
          labelWidth: 'auto',
          collapseRender:false,
        }}
        pagination={{
          pageSize: 6,
        }}
        dateFormatter="string"
        headerTitle="友情链接"
        toolBarRender={() => [
          <Button key="button" onClick={()=> showModal(true)} icon={<PlusOutlined />} type="primary">
            新建
          </Button>,
        ]}
      />

      <AddOrEdit
        visible={isModalVisible}
        showModal={showModal}
        id={id}
        ref={ref}
      />

    </PageContainer>

  )
}


export default Index
